<template>
  <div class="home"> 
      <van-row>
        <van-col span="18">打工人 打工魂</van-col>
        <van-col span="4" style="text-align: center"> {{ city }}</van-col>
        <van-col span="2"> <van-icon name="location"  size="30" /> </van-col>
      </van-row>
	  <van-row style="align-items: center"> 
	    <van-col span="22"> <van-search v-model="value"   placeholder="请输入搜索关键词" /> </van-col>
	    <van-col span="2"> <van-icon name="todo-list-o"   size="30"/></van-col>
	  </van-row>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>

      <van-tabs v-model="tab">
        <van-tab title="推荐"></van-tab>
        <van-tab title="餐饮服务"></van-tab>
        <van-tab title="超市零售"></van-tab>
        <van-tab title="物流仓储"></van-tab>
      </van-tabs>
	   <div class="between"> 
		 <div class="right">
			 <span @click="showArea= true"> 区域  <van-icon name="arrow-down" />  </span>
			 <span @click="showSort = true"> 排序  <van-icon name="arrow-down" />  </span>
			 <span @click="showFilter = true"> 筛选  <van-icon name="arrow-down" />  </span>
		 </div>
		  <van-icon name="circle"  size="30" />
	   </div>  
	  <!-- 滚动的list 区域-->
	  <div class="list">  
	    <Item /><Item /><Item /><Item /><Item /><Item />
		<Item /><Item /><Item /><Item /><Item /><Item />
		<Item /><Item /><Item /><Item /><Item /><Item />
		<Item /><Item /><Item /><Item /><Item /><Item />
	  </div> 
	 <van-popup  v-model:show="showArea"   position="bottom" round >  
	    <AreaPop  @submit="AreaPopSubmit"/> 
	 </van-popup>
   <van-popup  v-model:show="showFilter"   position="bottom" round >
	  <FilterPop  @submit="FilterPopSubmit"/> 
   </van-popup> 
   <van-popup  v-model:show="showSort"   position="bottom"  round>
   	  <SortPop  @submit="SortPopSubmit"/> 
   </van-popup> 

  </div>
</template>
<script >       

import {mapState,mapMutations} from 'vuex';
import Item from './list-item.vue'
import AreaPop from './pops/area-pop.vue'
import FilterPop from './pops/filter-pop.vue'
import SortPop from './pops/sort-pop.vue'   
export default {
  name: 'App',
  components:{ Item, AreaPop ,FilterPop,SortPop},
  data(){
    return {
      tab:0, 
	  value:'',value1:0,value2:0,value3:0,
	  option1 : [{ text: '区域', value: 0 },{ text: '新款商品', value: 1 },{ text: '活动商品', value: 2 },],
	  option2 : [{ text: '排序', value: 0 },{ text: '默认排序', value: 1 },{ text: '好评排序', value: 'b' },{ text: '销量排序', value: 'c' },],
      option3 : [{ text: '筛选', value: 0 },{ text: '新款商品', value: 1 },{ text: '活动商品', value: 2 },],
      showArea:false,showFilter:false,showSort:false,
	}
  },
  
  computed:{...mapState(['hash','city'])},
  async created(){
  	
  },
  methods: { ...mapMutations(['SetHash','SetCity',]),
     test(){    this.showFilter  = true  },
	 async getCity(){
		 var data = await fetch("http://httpbin.org/ip").then(res => res.json()) 
		 data = await fetch(`http://ip-api.com/json/${data.origin}?lang=zh-CN`).then(res => res.json())
		 console.log(data.city) 
		 this.SetCity( data.city.replace("市",""))
	 },
	 AreaPopSubmit(data){
		 if(data){
			 
		 }
		 this.showArea = false;
	 },
	 FilterPopSubmit(data){
		 if(data){
		 			 
		 }
		 this.showFilter = false;
	 },
	 SortPopSubmit(data){
		 if(data){
		 			 
		 }
		 this.showSort = false;
	 },
	 
  },
  mounted(){ 
     
     this.SetHash(location.hash)
  }, 
}
</script>
<style scoped>
	.home{
		padding:10px 0 0 0;
	}
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
	border-radius: 10px;
  }
  .list{
	  height:50vh;
	  overflow: auto;
  }
</style>